<template>
  <!-- @close="visible = $event"点击x关闭弹出层  判断表单是否有id 有id修改楼宇-->
  <el-dialog
    :title="formDate.id ? '修改楼宇' : '添加楼宇'"
    :visible="visible"
    width="580px"
    @close="$emit('update:visible', false)"
  >
    <el-row type="flex" justify="center">
      <el-form ref="formRef" :model="formDate" :rules="rules">
        <el-form-item label="楼宇名称" prop="name">
          <el-input
            v-model="formDate.name"
            placeholder="请输入楼宇名称"
            size="small"
            class="item"
          />
        </el-form-item>
        <el-form-item label="楼宇层数" prop="floors">
          <el-input
            v-model="formDate.floors"
            placeholder="请输入楼宇层数"
            class="item"
            size="small"
          />
        </el-form-item>
        <el-form-item label="在管面积" prop="area">
          <div style="margin-top: 15px">
            <el-input
              v-model="formDate.area"
              placeholder="请输入在管面积"
              class="item"
              size="small"
            >
              <template slot="append">m²</template>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item label="物业费" prop="propertyFeePrice">
          <el-input
            v-model="formDate.propertyFeePrice"
            placeholder="请输入物业费"
            class="item"
            size="small"
          >
            <el-button slot="append" size="small">元/m²</el-button>
          </el-input>
        </el-form-item>
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <!-- 点击取消 -->
      <el-button @click="$emit('update:visible', false)">取 消</el-button>
      <!-- 点击提交校验表单 绑定点击事件 获取表单数据 使用组件关键字 -->
      <el-button type="primary" @click="onSub">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getChangeApi, showChangeApi, updateBulApi } from '@/api/building'
// import { updateApi } from '@/api/user'
export default {
  // 父传子接收
  props: {
    visible: Boolean
  },
  //   表单校验  定义表单数据 设置规则 双向绑定数据
  data() {
    return {
      formDate: {
        name: '',
        floors: '',
        area: '',
        propertyFeePrice: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入楼宇名称', trigger: 'blur' }
        ],
        floors: [
          { required: true, message: '请输入楼宇层数', trigger: 'blur' },
          //   自定义规则，当输入框输入0的时候自动为1
          //   { pattern: /^([1]?[1-9]|20)$/, message: '层数不能低于1层且不能高于20层', trigger: 'blur' }
          { validator: (rules, value, callback) => {
            // console.log(value)
            if (value === '0') {
            //   console.log(value)
              this.formDate.floors = 1
            }
            if (value >= 21) {
              callback(new Error('层数不能低于1层且不能高于20层'))
              this.formDate.floors = ''
            }
          },
          trigger: 'blur'
          }
        ],
        area: [
          { required: true, message: '请输入在管面积', trigger: 'blur' }
        ],
        propertyFeePrice: [
          { required: true, message: '请输入物业费', trigger: 'blur' }
        ]
      }
    }
  },
  //   重置表单
  watch: {
    visible(newVisible) {
      if (!newVisible) {
        // 重置表单
        this.$refs.formRef.resetFields()
        this.formDate = {
          name: '',
          floors: '',
          area: '',
          propertyFeePrice: ''
        }
      }
    }
  },
  methods: {
    // 接收修改接口传来的id
    async onEdit(id) {
      //   回填数据
      const res1 = await showChangeApi(id)
      this.formDate = res1.data
      //   console.log(this.formDate.id)
      //   console.log(res1)
      //   给定义的表单重新赋值回填回来的数据，因为表单修改的时候不需要很多字段
      this.formDate = {
        name: res1.data.name,
        floors: res1.data.floors,
        area: res1.data.area,
        propertyFeePrice: res1.data.propertyFeePrice,
        id: res1.data.id
      }
    },
    // 点击校验表单
    async onSub() {
      // 表单确认校验
      this.$refs.formRef.validate()
      //   console.log(this.formDate.id)
      //   根据id判断点击的是修改还是新增
      if (!this.formDate.id) {
        await updateBulApi(this.formDate)
        //   console.log(res)
        // 添加成功通知父组件重新渲染页面，提示用户 关闭弹出框
        this.$message.success('添加成功')
        this.$emit('update:visible', false)
        //   通知父组件刷新页面
        this.$emit('onSuccess')
      } else {
        await getChangeApi(this.formDate)
        // 修改成功通知父组件重新渲染页面，提示用户 关闭弹出框
        this.$message.success('编辑成功')
        this.$emit('update:visible', false)
        //   通知父组件刷新页面
        this.$emit('onSuccess')
      }
    }
  }
}
</script>

<style>
.item {
  width: 380px;
}
</style>
